<!--
 * @Author: 杨光辉_GerhardYang
 * @Date: 2021-04-19 15:23:00
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-09-07 14:50:22
 * @Description: file content
-->
<template>
  <div>
    <div style="display: inline-block">打印当前范围地图：</div>
    <div class="loading">
      <div class="spin">
        <a-spin size="large" tip="地图打印中..." :spinning="spinning" />
      </div>
    </div>
    <a-button type="primary" block @click="printBrowserMap">打印</a-button>
  </div>
</template>
<script>
import domtoimage from "dom-to-image";
import { saveAs } from "file-saver";
export default {
  data() {
    return {
      spinning: false,
    };
  },
  computed: {
    map() {
      return this.$store.state.map;
    },
  },
  methods: {
    printBrowserMap() {
      this.spinning = true;
      let mapcontent = document.getElementById("map");
      mapcontent.style.top = 0;
      mapcontent.style.left = 0;
      mapcontent.style.bottom = 0;
      // console.log(mapcontent.style);
      domtoimage
        .toBlob(mapcontent, {
          width: window.innerWidth - 350,
          height: window.innerHeight,
          style: { border: "none" },
          bgcolor: "#fff",
          filter: this.filter,
        })
        .then((blob) => {
          saveAs(blob, "print-map.png");
          this.spinning = false;
          mapcontent.style.top = "1px";
          mapcontent.style.left = "1px";
          mapcontent.style.bottom = "1px";
        })
        .catch((err) => {
          this.spinning = false;
          mapcontent.style.top = "1px";
          mapcontent.style.left = "1px";
          mapcontent.style.bottom = "1px";
          this.$message.error("地图打印出错,请刷新页面后重新打印");
          console.log("rejected", err);
        });
    },
    filter(node) {
      return node.className !== "leaflet-control-container";
    },
  },
};
</script>

<style lang="less" scoped>
.loading {
  width: 100%;
  height: 200px;
  .spin {
    padding-top: calc(50% - 19px);
    padding-left: calc(50% - 32px);
  }
}
</style>
